<!--
 * @Description: 
 * @Author: ZhouGe
 * @Date: 2021-06-30 15:19:09
 * @LastEditors: ZhouGe
 * @LastEditTime: 2021-07-06 14:25:29
-->
<template>
  <HelloWorld msg="Hello Vue 3 + Vite" />
  <img alt="Vue logo" src="@/assets/logo.png" />
  <img alt="Vue logo" :src="logo" />
  <div :class="$style.logo"></div>
  <div :class="classes.logo"></div>
  <label>{{ t("language") }}</label>
  <select v-model="locale">
    <option value="en">en</option>
    <option value="zh">zh</option>
  </select>

  <p>{{ t("hello") }}</p>
  <!-- <Bar></Bar> -->
</template>

<script setup>
import HelloWorld from "comps/HelloWorld.vue";
// 解析为地址
import logo from "@/assets/logo.png";
// 加载模块化css
import classes from "./App.module.css";

import { getCurrentInstance, ref, computed, defineComponent } from "vue";
// const Bar = defineComponent({
//   render() {
//     return <div>Test</div>;
//   },
// });
// 获取组件实例
const ins = getCurrentInstance();

function useI18n() {
  const locale = ref("zh");
  // 获取资源信息
  const i18n = ins.type.i18n;
  const t = (msg) => {
    return computed(() => i18n[locale.value][msg]).value;
  };
  return { locale, t };
}

const { locale, t } = useI18n();

fetch("/api/users")
  .then((res) => res.json())
  .then((res) => {
    console.log(res);
  });

fetch("/api-dev/users")
  .then((res) => res.json())
  .then((res) => {
    console.log(res);
  });
</script>

<i18n>
{
  "en":{
    "language":"Language",
    "hello":"hello,world!"
  },
  "zh":{
    "language":"语言",
    "hello":"你好，世界！"
  }
}</i18n>

<style scoped>
img {
  border: 1px solid black;
}
::placeholder {
  color: blue;
}
</style>

<style module>
.logo {
  width: 100px;
  height: 100px;
  background: red;
}
</style>
